<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
	<meta name="theme-color" content="#eaeaea">
	<meta name="msapplication-TileColor" content="#eaeaea">
    <title>每天一张妹纸图</title>
	
	<style>
	body {
		background: beige;
		display: table;
		overflow: hidden;
		height: 99vh;
		margin: 0;
		visibility:hidden;
	}
	*{
		visibility:inherit;
	}
	.wo-text-html {
		visibility:visible;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: table;
	}

	div.wrap {
		width: 100vw;
		position: relative;
		display: table-cell;
		vertical-align: middle;
		visibility: visible;
	}

	.cache {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		top: 0;
		background: beige;
	}

	figure {
		margin: 0;
		position: relative;
	}

	div.wrap>figure>img {
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 80vh;
		box-sizing: border-box;
		display: table;
		margin: auto;
		padding: 1vh .5vh 7vh;
		background: white;
		box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3),2px 4px 0 0 white,2px 3px 3px 0 rgba(0,0,0,0.3),3px 7px 0 0 white;
		transition: transform 100ms,filter 2s;
	}

	div.wrap>figure>img:after {
		content: "\2318";
		font-size: 7rem;
	}

	div.wrap>figure>figcaption {
		position: absolute;
		text-transform: uppercase;
		font-family: fantasy,"Microsoft Yahei";
		font-size: 3vh;
		display: table;
		width: 100%;
		margin: auto;
		bottom: 0;
		text-shadow: 1px 1px 2px #4e4e4e;
	}

	div.wrap>i {
		cursor: pointer;
		position: absolute;
		top: 50%;
		width: 40px;
		height: 40px;
		font-size: 40px;
		line-height: 40px;
		background: white;
		border-radius: 50%;
		box-shadow: 0 0 2px 0 #bdbda2;
		text-align: center;
		overflow: hidden;
		transform: translateY(-50%);
		transition: all 1s;
	}

	div.wrap>i::before,div.wrap>i::after {
		font-family: monospace;
		font-style: normal;
		position: relative;
		left: 2px;
		top: -1px;
		transition: all 1s;
	}

	div.wrap>i::after {
		display: none;
	}

	#previous {
		left: 2vh;
	}

	#previous::before {
		content: "\2039";
		/*content: "\\2039";*/
	}

	#previous:hover::before {
		left: 1px;
		content: "\ab";
		/*content: "\\ab"*/
	}

	#next {
		right: 2vh;
	}

	#next::before {
		content: "\203a";
		/*content: "\\203a";*/
	}

	#next:hover::before {
		left: 3px;
		content: "\bb";
		/*content: "\\bb";*/
	}

	div.wrap>i:hover {
		border-radius: 3px;
		background-color: rgba(255,255,255,.7);
		animation-play-state: paused!important
	}

	@keyframes load {
		0% {
			transform: translateY(-50%) rotate(0);
		}

		100% {
			transform: translateY(-50%) rotate(360deg);
		}
	}

	@media screen and (max-width:800px) {
		div.wrap>i {
			display: none!important;
		}
		.blur{
			height: 100%;
		}
	}
	@media screen and (min-width:800px) {
		.blur{
			width: 100%;;
		}
	}

	::selection {
		background: none;
	}

	.blur {
		visibility:visible;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		max-height:none;
		max-width:none;
		filter: blur(12px);
	}
	
	</style>
	<script>
		var Resource = {},
			node = {},
			t = new Date;
		Resource.today = t.getFullYear()+"/"+(t.getMonth()+1)+"/"+t.getDate();
		function getHistory(){
			var xhr = new XMLHttpRequest();
			xhr.open("GET","https://gank.io/api/day/history");
			xhr.send();
			xhr.onreadystatechange = function(){
				if (xhr.readyState==4 && xhr.status==200){
					let res = JSON.parse(unescape(xhr.response.replace(/\\u/g,"%u").replace(/-/g,"/")));
					if(res.error){
						console.error("Get the history ERROR!");
					}else{
						Resource.availableDate = res.results;
						Resource.position = 0;
						func(0,null,null);
						showPrevious();
						showNext();
						node.prev.onclick = function(){
							node.prev.style.cssText+="animation:load 1s infinite;";
							func((Resource.position - 1),this);
						};
						node.next.onclick = function(){
							node.next.style.cssText+="animation:load 1s infinite;";
							func((Resource.position + 1),this);
						};
					}
				}
			}
		}
		function func(arg,obj){
			if(Resource.requesting){
				return false;
			}
			Resource.requesting = true;
			node.oImageNode.style.cssText= "filter: sepia(0.3) contrast(1.1) brightness(1.1) grayscale(1);";
			console.log("Param",arg,"\nRequest Start: ",Resource.position);
			var xhr = new XMLHttpRequest();
			xhr.open("GET","https://gank.io/api/day/"+ Resource.availableDate[arg||0]);
			xhr.send();
			node.oTextNode.innerText = "Loding...";
			xhr.onreadystatechange = function(){
				Resource.requesting = false;
				if (xhr.readyState==4 && xhr.status==200){
					if(arg >= 0){
						Resource.position = arg;
					}
					showPrevious();
					showNext();
					Resource.data = JSON.parse(unescape(xhr.response.replace(/\\u/g,"%u"))).results.福利;
					console.info(Resource.availableDate[arg||0]);
					//console.log(Resource.availableDate);
					if(Resource.data.error){
						console.error("Get the data ERROR!");
					}else{
						node.oImageNode.src = Resource.data[0].url;
						node.blurLayer.src = Resource.data[0].url;
						//node.oImageNode.alt = Resource.data[0].who;
						node.oImageNode.style.transform = "translateX(0)";
						node.oImageNode.style.transform = "translateY(0)";
						node.oImageNode.onload = function(){
							node.oTextNode.innerText = Resource.data[0].who;
							node.oImageNode.style.cssText= "filter:none";
							!obj || (obj.style.cssText += "transform:translateY(-50%) rotate(0);animation:null;");
						}
						console.log("Request End: ",Resource.position);
					}
				}
			}	
		}
		function showPrevious(){
			if(Resource.position != 0){
				node.prev.style.display = "initial";
			}else{
				node.prev.style.display = "none";
			}
		}
		function showNext(){
			if(Resource.position < Resource.availableDate.length ){
				node.next.style.display = "initial";
			}else{
				node.next.style.display = "none";
			}
		}

		window.onload = function(){
			//document.body.innerHTML = '<div class="wrap"><figure class="containor"></figure><i id="previous"></i><i id="next"></i></div>';
			getHistory();
			Resource.requesting = false;
			node.prev = document.querySelector("#previous");
			node.next = document.querySelector("#next");
			node.oImageNode = document.createElement("img");
			node.oTextNode = document.createElement("figcaption"),
			node.containor = document.querySelector("figure.containor");

			node.blurLayer = node.oImageNode.cloneNode(true);
			node.oImageNode.src = "noimage.png";
			node.oTextNode.innerText = "Loding...";
			node.blurLayer.className = "blur";
			node.containor.appendChild(node.oImageNode);
			node.containor.appendChild(node.oTextNode);
			document.body.append(node.blurLayer);
			var touchPoint={};
			node.oImageNode.addEventListener("touchstart",function(e){
				touchPoint.x=e.targetTouches[0].screenX;
				touchPoint.y=e.targetTouches[0].screenY;
				//console.log(touchPoint.x,",",touchPoint.y);
			});
			node.oImageNode.addEventListener("touchmove",function(e){
				touchPoint.disX = e.targetTouches[0].screenX - touchPoint.x;
				touchPoint.disY = e.targetTouches[0].screenY - touchPoint.y;
				console.log( touchPoint.disX > touchPoint.disY);
				if(Math.abs(touchPoint.disX) > Math.abs(touchPoint.disY)){
					e.target.style.transform = "translateX(" + touchPoint.disX + "px)";
				}else{
					e.target.style.transform = "translateY(" + touchPoint.disY + "px)";
				}
			});
			node.oImageNode.addEventListener("touchend",function(e){
				//console.log(e);
				let rateX = e.target.clientWidth * 0.3,
					rateY = e.target.clientHeight * 0.3;
				if(touchPoint.disX < -rateX || touchPoint.disY < -rateY){
					if(Resource.position < Resource.availableDate.length - 1){
						func(Resource.position + 1,null,false);
						document.querySelector("#previous").style="initial";
					}
				}else{
					if(touchPoint.disX > rateX || touchPoint.disY > rateY){
						if(Resource.position >= 1){
							func(Resource.position - 1,null,true);
							document.querySelector("#next").style="initial";
						}
					}
				}
				touchPoint.disX = null;
				touchPoint.disY = null;
				touchPoint.x = null;
				touchPoint.y = null;
				e.target.style.transform = "translateX(0)";
				e.target.style.transform = "translateY(0)";
			});
		}	
	</script>
</head>
<body class="cache">
	<div class="wrap">
		<figure class="containor"></figure>
		<i id="previous"></i>
		<i id="next"></i>
	</div>
</body>
</html>